<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated height-hint="51">
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer"
        />

        <q-toolbar-title
          class="cursor-pointer"
          @click="
            () => {
              $router.push('/').then(() => {
                iconStore.iconClickItem = undefined;
              });
            }
          "
        >
          Quasar图标浏览
        </q-toolbar-title>

        <div>
          Quasar v
          <q-chip class="glossy" :label="$q.version" />
        </div>

        <div>
          @QuasarExtras v
          <q-chip class="glossy" :label="extrasVersion" />
        </div>
        <div>
          QuasarExtrasSvgIcons v
          <q-chip class="glossy" :label="extrasIconsVersion" />
        </div>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" show-if-above bordered>
      <div
        class="text-white row q-px-sm items-center z-top bg-primary full-width"
        style="height: 50px"
      >
        <q-input
          class="full-width"
          dense
          outlined
          debounce="1000"
          v-model="iconStore.queryText"
          type="text"
          bg-color="grey-1"
          placeholder="过滤图标"
        >
          <template v-slot:append>
            <q-icon name="search" />
          </template>
        </q-input>
      </div>
      <q-scroll-area style="height: calc(100vh - 51px)">
        <q-list>
          <q-item-label header class="text-h5 text-grey-10">
            @quasar/extras
          </q-item-label>
          <q-item
            :class="
              classActive(icon.iconTypeName) ? 'text-blue-5 bg-blue-1' : ''
            "
            clickable
            @click="itemClick(icon)"
            v-for="icon in iconAll.quasarExtras"
            :key="icon.iconTypeName"
          >
            <q-item-section>
              <q-item-label>{{ icon.iconTypeName }}</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
        <q-list>
          <q-item-label header class="text-h5 text-grey-10">
            quasar-extras-svg-icons
          </q-item-label>
          <q-item
            :class="
              classActive(icon.iconTypeName) ? 'text-blue-5 bg-blue-1' : ''
            "
            clickable
            @click="itemClick(icon)"
            v-for="icon in iconAll.quasarExtrasSvgIcons"
            :key="icon.iconTypeName"
          >
            <q-item-section>
              <q-item-label>{{ icon.iconTypeName }}</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useQuasar } from 'quasar';
import pkg from '@quasar/extras/package.json';
import pkg2 from 'quasar-extras-svg-icons/package.json';
import { iconType, useIconStore } from 'src/stores/IconStore';
const extrasVersion = pkg.version;
const extrasIconsVersion = pkg2.version;
const $q = useQuasar();
const iconStore = useIconStore();

const leftDrawerOpen = ref(false);

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}

const classActive = (iconTypeName: string) => {
  return (
    iconStore.iconClickItem &&
    iconTypeName == iconStore.iconClickItem.info.iconTypeName
  );
};

const iconAll = ref<{
  quasarExtras: iconType;
  quasarExtrasSvgIcons: iconType;
}>({
  quasarExtras: [],
  quasarExtrasSvgIcons: [],
});

const itemClick = (item: iconType[0]) => {
  iconStore.loadIcon(item);
};

watch(
  () => iconStore.queryText,
  (newVal) => {
    iconStore.queryText = newVal;
    iconAll.value = iconStore.queryIconList();
  },
);
iconAll.value = iconStore.queryIconList();
</script>
